<template>
  <div class="index">
    <header class="header">
      <div class="left"><img src="../../static/img/arrow.png"></div>
      <div class="center">{{msg}}</div>
      <div class="right"></div>
    </header>   

    <ul class="contList">
      <li>
        <article>
          <div class="npt-left">
            <img src="../../static/img/telphone.png">
          </div>
          <div class="npt-center">
            <input type="text" class="nptex" placeholder="手机号">
          </div>
          <div class="npt-right"></div>
        </article>
      </li>
      <li>
        <article>
          <div class="npt-left num">
            <img src="../../static/img/number.png">
          </div>
          <div class="npt-center">
            <input type="text" class="nptex" placeholder="验证码">
          </div>
          <div class="npt-right">
            <p>获取验证码</p>
          </div>
        </article>
      </li>      
    </ul>

    <div class="bound">
      <span>{{msg}}</span>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'Enter',
    data () {
      return {
        msg: '绑定手机'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @import  '../assets/css/reset.css';

 body{
  height: 100%;
 }
  .px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}


  .index{    
     .header {
      position: fixed;
      width: 100%;
      top: 0;
       .px2rem (height,150);       
        background:#1a1a1a;
        display: flex;
        justify-content: center;
        align-items: center;
        .left{
          width: 4em;
          .px2rem (padding-left,30);
          img{
            width: 33%;
          }
        }
        .center{
            flex:1;
            .px2rem (font-size,60);            
            color: #be8f59;
            text-align: center;

        }
        .right{
          width: 4em;
        }
    }
    .contList{
      .px2rem (margin-top,184);
      .px2rem (padding-left,45);
      .px2rem (padding-right,45);
      li{        
        // flex-direction: column;
        // justify-content: center;
        // align-items: center;     
        border-bottom: 3px solid #ccc;
        .px2rem (height,212);        
        article{
          display: flex;
          .npt-left{
            width: 6em;            
            .px2rem (line-height,212);            
            text-align: center;            
            img{
              width: 33%;              
            }
            &.num{
              img{
                width: 42%;
              }
            }
          }
          .npt-center{
            flex:1;            
            .nptex{
              width: 100%;
              height: 100%;
              .px2rem (font-size,40);
              color: #c0c0c0;
              .px2rem (padding-left,10);
            }
          }
          .npt-right{
            width: 9em;
            p{
              background: #999999;
              .px2rem (width,180);
              .px2rem (height,80);
              .px2rem (font-size,30);
              color: #be8f59;
              text-align: center;
              .px2rem (line-height,80);
              .px2rem (margin-top,64);
            }           
          }

        }
      }
    }
    .bound{
      .px2rem (margin-top,100);
      display: flex;
      span{
        background: #1a1a1a;
        .px2rem (width,990);
        .px2rem (height,140);
        .px2rem (margin-left,44);
        .px2rem (margin-right,44);
        .px2rem (border-radius,10);
        color: #be8f59;
        .px2rem (font-size,50);
        text-align: center;
        .px2rem (line-height,140);
      }
    }


  }
</style>
